<template>
    <div class="container">
        <system-nav name="接收简报"></system-nav>
        <div class="inner">
            <div class="system-content">
                <div class="tool-bar">
                    <Form class="search-bar" ref="searchForm" :model="searchForm" :label-width="75" :inline="true">
                        <FormItem label="标题名称："> 
                            <Input class="search-input" type="text" v-model.trim="searchForm.searchText" clearable 
                                @on-clear="handleSearch" @keydown.enter.native.prevent="handleSearch" placeholder="请输入标题名称">
                            </Input>
                            <Button class="search-btn" type="primary" @click="handleSearch">查询</Button>
                        </FormItem>
                    </Form>    
                </div>
                <Table :columns="columns" :data="data">
                    <template slot-scope="{ row }" slot="createTime">
                        {{ row.createTime | formatDate }}
                    </template>
                    <template slot-scope="{ row }" slot="readFlag">
                        {{ row.readFlag ? '已读' : '未读' }}
                    </template>
                    <template slot-scope="{ row }" slot="action">
                        <div class="action-btns">
                            <Button type="text" size="small" @click="gotoDetail(row)">查看</Button>
                        </div>
                    </template>
                </Table>
                <div style="margin: 10px;overflow: hidden">
                    <div style="float: right;">
                        <Page :total="total" :current="current" :page-size="pageSize" :page-size-opts="pageSizeOpts"
                            show-total show-elevator show-sizer
                            @on-change="changePage" @on-page-size-change="changePageSize">
                        </Page>
                    </div>
                </div>              
            </div>
        </div>
    </div>
</template>

<script>
import SystemNav from '@/components/SystemNav'
import mixin from '@/mixins'
import { getMessageListRest } from '@/common/apis/system'

export default {
    name: "bulletinList",
    mixins: [mixin],
    components: {
        SystemNav
    },
    data() {
        return {
            type: 2,
            searchForm: {
                searchText: ''
            },
            columns: [
                {
                    title: '简报标题',
                    key: 'title'
                },
                {
                    title: '发送人',
                    key: 'sendUserName'
                },
                {
                    title: '发送组织',
                    key: 'sendUserDeptName'
                },
                {
                    title: '发送时间',
                    key: 'createTime',
                    sortable: true,
                    sortType: 'desc',
                    slot: 'createTime'
                },
                {
                    title: '简报状态',
                    key: 'readFlag',
                    slot: 'readFlag'
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 125,
                    slot: 'action'
                }
            ],
            data: []
        }
    },
    mounted() {
        this.initData()
    },
    methods: {
        initData() {
            const params = {
                pageNo: this.current,
                pageSize: this.pageSize,
                type: this.type
            }
            if (this.searchForm.searchText) {
                params.params = this.searchForm.searchText
            }
            getMessageListRest(params).then(result => {
                const data = result.data.content
                this.data = data.list || []
                this.total = data.total
            })
        },
        handleSearch() {
            this.current = 1
            this.initData()
        },
        gotoDetail(record) {
            this.$router.push('/bulletin/detail/' + record.id)
        }
    }
}
</script>
